import React from 'react';
import { connect } from 'dva';
import { Carousel, NavBar } from 'antd-mobile';
import { LoadingView } from '../components/LoadingComponents';
import styles from './HomePage.css';
import { Flex, WhiteSpace } from 'antd-mobile';
import Slider from 'react-slick';

const Btn = (props) => {
  const { onClick, title, source } = props;
  return (
    <div className={styles.btn} onClick={(()=>{onClick && onClick()})}>
      <img src={source} className={styles.btnImage}/>
      <p className={styles.btnText}>{title}</p>
    </div>
  )
};

const Cell = (props) => {
  const { data, goWithUrl } = props;

  if (!data) {
    return;
  }

  const w1 = 1;
  const h1 = w1*470/260;
  const w2 = 1;
  const h2 = (h1-1)/2;

  return (
    <div className={styles.cell}>
      <div className={styles.cellText}>{data[0].title}</div>
      <div className={styles.cell1}>
        <div className={styles.cell4}>
          <p>{data[1].title}</p>
          <img src={data[1].image} className={styles.item1}/>
        </div>
        <div className={styles.cell2}>
          <div className={styles.cell3}>
            <img src={data[2].image} className={styles.item2}/>
            <img src={data[3].image} className={styles.item2}/>
          </div>
          <div className={styles.cell3}>
            <img src={data[4].image} className={styles.item2}/>
            <img src={data[5].image} className={styles.item2}/>
          </div>
        </div>
      </div>
    </div>
  );
};


class HomePage extends React.Component {


  componentDidMount() {

  }

  loadData() {

  }

  render() {

    const { home: {
      contentData,
      showLoading,
      showContent,
    } } = this.props;

    console.log('render home');

    return (
      <div className="normal">
        <NavBar
          iconName={false}
          mode="light"
        >
          首页
        </NavBar>
        {showLoading && <LoadingView/>}
        {showContent && this.renderContent()}
      </div>
    );
  }

  renderContent() {

    const { home: {
      contentData
    } } = this.props;

    let topAdData = [];
    let categorys = [];
    let floorList = [];
    if (contentData && contentData.head && contentData.head.code === '0') {
      topAdData = contentData.body.companySliders;
      categorys = contentData.body.categorys;
      floorList = contentData.body.floorList;
    }
    let settings = {
      dots: false,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      autoplay: false,
    };
    return (
      <div>
        {<div>
          {false && <Slider {...settings} className={styles.cell}>
            {topAdData.map((data, index) => <img src={data.image} key={index + 'topImage'}/>)}
          </Slider>}
          {true && <img src={topAdData[0].image} className={styles.cell}/>}
        </div>}
        {this.renderBtns()}
        {categorys.length>4 && this.renderCategorys(categorys)}
        {floorList.length>0 && this.renderFloors(floorList)}
      </div>
    );

  }
  renderBtns() {
    return (
      <div>
        <div className={styles.btns}>
          <Btn title="页面跳转" source={require('../images/icon_newhome_bianmin@2x.png')} onClick={()=>{
            console.log(this.props);
            this.props.dispatch({
              type:'home/click'
            })
          }}/>
          <Btn title="虚拟卡券" source={require('../images/icon_newhome_xuni@2x.png')}/>
          <Btn title="生日福利" source={require('../images/icon_newhome_shengri@2x.png')}/>
        </div>
        <div className={styles.btns}>
          <Btn title="积分兑换" source={require('../images/icon_newhome_jifen@2x.png')}/>
          <Btn title="积分商城" source={require('../images/icon_newhome_shangcheng@2x.png')}/>
          <Btn title="员工福利" source={require('../images/icon_newhome_fuli@2x.png')}/>
        </div>
      </div>
    );
  }

  renderCategorys(categorys) {
    return (
      <div className={styles.category}>
        <div className={styles.category1}>
          <img src={categorys[0].image} className={styles.categoryItem}/>
          <img src={categorys[1].image} className={styles.categoryItem}/>
        </div>
        <div className={styles.category2}>
          <img src={categorys[2].image} className={styles.categoryItem}/>
          <img src={categorys[3].image} className={styles.categoryItem}/>
          <img src={categorys[4].image} className={styles.categoryItem}/>
        </div>
      </div>
    );
  }

  renderFloors(floorList) {
    return (
      <div>
        {floorList.map((data, index)=>{
          return <Cell data={data} key={index + 'cell'} />
        })}
        <div style={{height:49*2}}/>
      </div>
    );
  }

}

const mapStateToProps = ({ home }) => ({home});

export default connect(mapStateToProps)(HomePage);
